<template>

	<body>
		<div class="loan_nav col_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>申请信用卡</p>
				</li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<div>
			<ul class="L_content">
				<li><img :src="creditInfo.mainImg" width="100%" /></li>
				<li>
					<h1>
						<span>{{creditInfo.creditName}}</span>
					</h1>
					<p v-html="creditInfo.info"></p>
				</li>
			</ul>
		</div>
		<div class="card_form">
			<ul>
				<li>
					<span>
						<p>*</p>
					</span>
				</li>
				<li>
					<p>姓名：</p>
				</li>
				<li>
					<input v-model="params.userName" type="text" placeholder="请与证件一致" />
				</li>
			</ul>
			<ul>
				<li>
					<span>
						<p>*</p>
					</span>
				</li>
				<li>
					<p>身份证号：</p>
				</li>
				<li>
					<input v-model="params.cardNo" type="text" placeholder="请输入身份证号" />
				</li>

			</ul>
			<ul>
				<li>
					<span>
						<p>*</p>
					</span>
				</li>
				<li>
					<p>手机号：</p>
				</li>
				<li>
					<input v-model="params.mobile" type="text" placeholder="请输入手机号" />
				</li>
				<!-- <li>
					<input type="button" value="获取验证码" />
				</li> -->
			</ul>
			<!-- <ul>
				<li>
					<span>
						<p>*</p>
					</span>
				</li>
				<li>
					<p>短信验证码：</p>
				</li>
				<li>
					<input type="text" />
				</li>
			</ul> -->
			<ul>
				<li>
					<span>
						<p>*</p>
					</span>
				</li>
				<li>
					<group>
						<x-address :value="address" @on-shadow-change="onShadowChange" title="地址选择" :list="addressData" raw-value placeholder="请选择地址"></x-address>
					</group>
				</li>
			</ul>
			<ul>
				<li>
					<span>
						<p>*</p>
					</span>
				</li>
				<li>
					<p>单位详细地址：</p>
				</li>
				<li>
					<input v-model="params.address" type="text" placeholder="请输入详细地址"/>
				</li>
			</ul>
			<ul>
				<li>
					<span>
						<p>*</p>
					</span>
				</li>
				<li>
					<p>单位名称：</p>
				</li>
				<li>
					<input v-model="params.companyName" type="text" placeholder="非在职人员暂不受理" />
				</li>
			</ul>
			<ul>
				<li>
					<span>
						<p>*</p>
					</span>
				</li>
				<li>
					<group>
						<popup-picker title="学历" :data="list1" v-model="education" placeholder="请选择学历">

						</popup-picker>
					</group>
				</li>
			</ul>
			<ul>
				<li>
					<span>
						<p>*</p>
					</span>
				</li>
				<li>
					<group>
						<popup-picker title="职务" :data="list2" v-model="duty" placeholder="请选择职务">

						</popup-picker>
					</group>
				</li>
			</ul>
		</div>
		<div class="btn">
			<input @click="apply" type="button" value="提交" class="col-green" />
		</div>
		<div style="height: 0.5rem;">

		</div>
	</body>
</template>

<script>
import { Group, XAddress, ChinaAddressV4Data, PopupPicker } from 'vux'
export default {
	components: {
		Group,
		XAddress,
		ChinaAddressV4Data,
		PopupPicker
	},
	data() {
		return {
			addressData: ChinaAddressV4Data,
			list1: [['高中以下', '高中', '大专', '本科', '硕士研究生', '博士', '其他']],
			list2: [['董事长', '总经理', '总经理秘书', '主管', '会计', '销售经理', '销售人员', '采购经理', '采购文员']],
			address: [],
			education: [],
			duty: [],
			creditInfo: {},
			params: {}
		}
	},
	created() {
		this.query()
	},
	methods: {
		onShadowChange (ids, names) {
	    	if(names.length > 0){
	    		this.params.province = names[0]
				this.params.city = names[1]
				this.params.area = names[2]
			}
	    },
		query() {
			this.$http.get(`/app/creditInfo/info/${this.$route.params.id}`).then(json => {
				const { code, creditInfo } = json
				if(code === 0) {
					this.creditInfo = creditInfo
				}
			})
		},
		apply() {
			const params = this.params
			params.education = this.education[0]
			params.duty = this.duty[0]
			this.$http.post('/app/creditApply/save', params).then(json => {
				const { code } = json
				if(code === 0) {
					this.$vux.toast.show({ text: '申请提交成功' })
					this.$router.back()
				}
			})
		}
	}
}
</script>

<style>
.weui-label {
  font-size: 0.26rem !important;
}
.vux-popup-picker-value {
  font-size: 0.26rem !important;
}
.weui-cell {
  padding: 0 !important;
}
.vux-no-group-title {
  margin: 0 !important;
}
.weui-cells {
  background: none !important;
}
.weui-cells:before {
  border: none !important;
}
.weui-cells:after {
  border: none !important;
}
.vux-popup-picker-placeholder {
  font-size: 0.26rem !important;
}
</style>